<template>
	<view class="custom-tabbar">
		<view class="tabbar-item" v-for="(item, index) in tabBarList" :key="index" v-if="index < 2"
			@click="switchTab(index)">
			<image class="tabbar-icon" :src="current === index ? item.selectedIconPath : item.iconPath" />
			<text :class="{ active: current === index }">
				{{ item.text }}
			</text>
			<view v-show="index == 1 && unreadNum > 0" class="num">{{ unreadNum }}</view>
		</view>
		<!--  -->
		<view class="tabbar-center" @click="switchTab('center')">
			<view class="center-btn">
				<image class="center-img"
					:src="centerActive ? '/pages-landlord/static/images/addx.png' : '/pages-landlord/static/images/add.png'" />
			</view>
			<text class="center-text" :class="{ 'center-text-active': centerActive }">
				发布
			</text>
		</view>
		<view class="tabbar-item" v-for="(item, index) in tabBarList" :key="index" v-if="index >= 2"
			@click="switchTab(index)">
			<image class="tabbar-icon" :src="current === index ? item.selectedIconPath : item.iconPath" />
			<text :class="{ active: current === index }">
				{{ item.text }}
			</text>
		</view>
	</view>
</template>
<script>
import {
	landlordinfo,
} from '@/api/landlord.js'
export default {
	props: {
		tabBarIndex: {
			type: Number,
			default: 0,
		},
		unreadNum: {
			type: Number,
			default: 0,
		},
	},
	data() {
		return {

			tabBarList: [{
				text: "首页",
				iconPath: "/pages-landlord/static/images/home.png",
				selectedIconPath: "/pages-landlord/static/images/homeSelect.png",
			},
			{
				text: "消息",
				iconPath: "/pages-landlord/static/images/message.png",
				selectedIconPath: "/pages-landlord/static/images/messageSelect.png",
			},
			{
				text: "房源管理",
				iconPath: "/pages-landlord/static/images/room.png",
				selectedIconPath: "/pages-landlord/static/images/roomSelect.png",
			},
			{
				text: "我的",
				iconPath: "/pages-landlord/static/images/m.png",
				selectedIconPath: "/pages-landlord/static/images/m1.png",
			},
			],
			current: 4,
			centerActive: false,
			realNameInfo: null
		};
	},

	watch: {
		tabBarIndex: {
			immediate: true,
			handler(newVal) {
				if (newVal === 2) {
					this.centerActive = true;
					this.current = -1;
				} else {
					this.centerActive = false;
					// 根据父组件传入的索引反向映射到本地索引
					const reverseMap = {
						0: 0, // 首页
						1: 1, // 消息
						3: 2, // 房源管理
						4: 3, //我的
					};
					this.current = reverseMap[newVal];
				}
			},
		},
	},
	methods: {
		switchTab(index) {
			// 获取房东认证信息
			landlordinfo().then(res => {
				this.realNameInfo = res.data.data;
				if (index != 3 && (!this.realNameInfo || (this.realNameInfo && this.realNameInfo.status !=
					1))) {
					return this.$Toast("您还未认证，请前往认证");
				}
				if (index === "center") {
					this.centerActive = true;
					this.current = -1;
					// this.$emit("changeTabbar", 2);
					this.$Tips('/pages-landlord/room-manage/add-room')
				} else {
					this.centerActive = false;
					const emitMap = {
						0: 0, // 首页
						1: 1, // 消息
						2: 3, // 房源管理
						3: 4, // 我的
					};
					this.current = index;
					this.$emit("changeTabbar", emitMap[index]);
				}
			})
		},
	},
};
</script>

<style lang="scss" scoped>
.custom-tabbar {
	position: fixed;
	z-index: 999;
	bottom: 0;
	left: 0;
	right: 0;
	// height: 70px;
	width: 100%;

	background-color: #fff;
	display: flex;
	justify-content: space-around;
	align-items: flex-end;
	box-shadow: 0 4px 32px 0 rgba(0, 0, 0, 0.1);
	border-top-left-radius: 18px;
	border-top-right-radius: 18px;
	padding-bottom: env(safe-area-inset-bottom);
	overflow: visible;

	margin-right: 20rpx;
}

.tabbar-item {
	flex: 1;
	text-align: center;
	position: relative;
	padding-top: 8px;
	font-size: 13px;
	color: #888;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
}

.tabbar-icon {
	width: 32px;
	height: 32px;
	margin-bottom: 0px;
	margin-top: 2px;
}

.active {
	color: #ff7e00;
	font-weight: bold;
}

.orange {
	color: #ff7e00;
	font-weight: bold;
}

.tabbar-center {
	width: 80px;
	height: 80px;
	margin-top: -36px;
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 10;
}

.center-btn {
	width: 110rpx;
	height: 114rpx;
	background: transparent;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.18);
	margin-bottom: 2px;
	transition: box-shadow 0.2s;
	overflow: hidden;
}

.center-img {
	width: 110rpx;
	height: 114rpx;
}

.center-text {
	margin-top: 2px;
	color: #888;
	font-size: 13px;
}

.center-text-active {
	color: #ff7e00;
	font-weight: bold;
}

.num {
	position: absolute;
	right: 20rpx;
	top: 10rpx;
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
	background: red;
	font-size: 30rpx;
	color: #fff;
	text-align: center;
	line-height: 40rpx;
}
</style>